<template>
  <div class="content">
    <dc-header :title="'记账'"
               @submit="goAccount"
               :page-to="'/home/reports'"
               :action-title="'设置' | hasPermissions('设置')"></dc-header>
    <div class="head-top account-simple-prompt">
      <!--<div v-if="this.permission">当前使用的是-->
      <div v-if="accountToolTotal.isAdmin == 1">当前使用的是
        <span class="sim">简易版</span>
        记账，如需要精细管理，请切换至
        <router-link to="/accountMethod/1/1"><a class="pro">专业版</a></router-link>
        <i class="iconfont icon-right"></i>
      </div>
    </div>
    <dc-select-date @getTabBarDate="TabBarDate" type="month" :startTime="$route.query.beginTime"></dc-select-date>
    <div class="bg-white" style="margin-bottom: 53px;">
      <dc-row type="flex" justify="space-around" class="mt20">
        <dc-col span="12">
          <div class="account-tab" @click="changeTab(2)" :class="{'account-tab-active':accountFlag === 2}">
            <div class="tab-div account-pay-yellow">
              <i class="iconfont icon-account-pay"></i>
              <div class="tab-number">
                <span class="num">{{accountToolTotal.totalExpend}}</span>
                <br/>
                <span>本月支出总计</span>
              </div>
            </div>
          </div>
        </dc-col>
        <dc-col span="12">
          <div class="account-tab" @click="changeTab(1)" :class="{'account-tab-active':accountFlag === 1}">
            <div class="tab-div account-income-green">
              <i class="iconfont icon-account-income"></i>
              <div class="tab-number">
                <span class="num">{{accountToolTotal.totalIncome}}</span>
                <br/>
                <span>本月收入总计</span>
              </div>
            </div>
          </div>
        </dc-col>
      </dc-row>
      <div>
        <div class="common-card">
          <mt-cell title="" class="main-title account-border-b">
            <span slot="icon">{{accountFlag ===2 ? '支出项' : '收入项'}}</span>
          </mt-cell>
          <dc-row type="flex" justify="center" class="bg-white account-input-list account-border-b"
                  v-for="data in accountToolList" :key="data.accountCode">
            <dc-col span="10">
              <svg class="account-color-icon" aria-hidden="true">
                <use :xlink:href="'#'+data.accountIcon"></use>
              </svg>
              <span class="input-label">{{data.accountName}}</span>
              <dc-tooltip v-if="data.accountName === '原料成本' && accountFlag ===2" :place="'bottom-left'"
                          :msg="'当选择按菜品毛利估算时，此处数据为系统自动更新，不可修改'"></dc-tooltip>
              <dc-tooltip v-if="data.accountName === '营收收入' && accountFlag ===1" :place="'bottom-left'"
                          :msg="'营业收入为系统自动更新，不可修改'"></dc-tooltip>
            </dc-col>
            <dc-col span="14">
              <div class="input-div">
                <input class="input-data" type="number" v-model="data.accountNum" disabled="true"/>
              </div>
            </dc-col>
          </dc-row>
        </div>
      </div>
    </div>
    <router-link :to="{path: '/simAccountEdit',query: {param: this.param,data: this.accountToolList}}">
      <div class="account-btn"><i class="iconfont icon-textedite"></i>编辑</div>
    </router-link>
  </div>
</template>
<script>
  import account from '@/components/account/account';
  import header from '@/common/plugins/header';
  import datetabbar from '@/common/plugins/datetabbar';
  import tooltip from '@/common/plugins/tooltip';
  import {col, row} from '@/common/Flex';
  import api from '@/common/api/account';
  import {permissions} from '@/common/permission';
  import {mapGetters} from 'vuex';
  /**
   * @namespace  components/account/accountTools/simAccountTool
   * @author lxr
   */
  export default {
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row,
      'dc-select-date': datetabbar,
      'dc-tooltip': tooltip
    },
    data () {
      return {
        permission: false,
        accountFlag: 2, //1表示收入，2表支出
        invisible: false,
        TabBarDate: (date) => {
          if (this.$route.query.accountFlag) {
            this.accountFlag = this.$route.query.accountFlag;
            this.param.accountFlag = this.$route.query.accountFlag;
          }
          this.param.beginTime = date.startTime;
          this.param.endTime = date.endTime;
          this.getAccountList();
          this.getAccountTotal();
        },
        accountToolList: [],
        accountToolTotal: {},
        param: {  //接口调用入参
          accountFlag: 2,
          beginTime: null,
          endTime: null
        }
      };
    },
    methods: {
      goAccount () {
        //获取记账设置
        if (!permissions('设置')) {
          return;
        }
        setTimeout(() => {
          this.$router.push('/accountSet/1');
        }, 0);
      },
      //支出和收入tab切换
      changeTab (data) {
        this.accountToollist = [];
        this.accountFlag = data;
        this.param.accountFlag = data;
        this.getAccountList();
      },
      //接口查询获得收入或者支出的数据
      getAccountList () {
        api.getAccountToolList(this.param).then(res => {
          this.accountToolList = res;
        });
      },
      //接口查询支出，收入总计
      getAccountTotal () {
        api.getAccountToolTotal(this.param).then(res => {
          this.accountToolTotal = res;
          this.accountToolTotal.totalExpend = account.numberChange(this.accountToolTotal.totalExpend);
          this.accountToolTotal.totalIncome = account.numberChange(this.accountToolTotal.totalIncome);
        });
      }
    },
    computed: {
      ...mapGetters(['store', 'userInfo'])
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";
  @import "../account";

  .account-simple-prompt {
    background: #E7F5FE;
    color: #5B8FC7;
    div {
      padding: px2rem(30px) 0;
    }
    .sim {
      color: #D2AF60;
    }
    .pro {
      color: $theme-color;
    }
    i {
      color: #CCCCCC;
    }
  }
</style>
